<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>inputEx-yui3 - StringField Usage</title>

    <!--[if IE 6]>
    <link type='text/css' rel='stylesheet' href='../css/inputEx-IE6.css' />
    <![endif]-->

    <!-- Demo CSS -->
    <link rel="stylesheet" type="text/css" href="css/demo.css"/>
    <link rel="stylesheet" type="text/css" href="css/dpSyntaxHighlighter.css">

    <script type="text/javascript" src="../js/inputex-loader.js"></script>
</head>

<body>
<p class='demoTitle'>
    <script>document.write(document.title)</script>
</p>

<!-- Example 1 -->
<div class='exampleDiv'>

    <p class="title">Basic StringField creation</p>

    <p>Use the following code to create a basic inputEx field.</p>

    <div class='demoContainer' id='container1'></div>

    <div class='codeContainer'>
        <textarea name="code" class="js">
            //new YAHOO.inputEx.StringField({parentEl: 'container1' });
            new Y.inputEx.StringField().render('#container1');
        </textarea>
    </div>

</div>


<!-- Example 2 -->
<div class='exampleDiv'>

    <p class="title">With a default value</p>

    <p>You can set a default value by specifying the 'value' property in the options object.</p>

    <div class='demoContainer' id='container2'></div>

    <div class='codeContainer'>
        <textarea name="code" class="js" cols="60" rows="1">
            //new YAHOO.inputEx.StringField({value: 'inputEx rocks', parentEl: 'container2'});
            new Y.inputEx.StringField({value: 'inputEx rocks'}).render('#container2');
        </textarea>
    </div>

</div>


<!-- Example 3 -->
<div class='exampleDiv'>

    <p class="title">Changing the size</p>

    <p>You can set the size of the input.</p>

    <div class='demoContainer' id='container3'></div>

    <div class='codeContainer'>
        <textarea name="code" class="js" cols="60" rows="1">
            //new YAHOO.inputEx.StringField({size: 40, value: 'size is set to 40 (default is 20)',
            parentEl:'container3'});
            new Y.inputEx.StringField({size: 40, value: 'size is set to 40 (default is 20)'}).render('#container3');
        </textarea>
    </div>

</div>


<!-- Example 4 -->
<div class='exampleDiv'>

    <p class="title">Maximum and minimum length</p>

    <p>You can add a maximum/minimum length on string fields :</p>

    <div class='demoContainer' id='container4'></div>

    <div class='codeContainer'>
        <textarea name="code" class="js" cols="60" rows="1">
            //new YAHOO.inputEx.StringField({value: '0123456789', showMsg: true, minLength: 3, maxLength: 10, parentEl:
            'container4'});
            new Y.inputEx.StringField({value: '0123456789', showMsg: true, validator:[{minLength: 3, maxLength: 10,
            message:'length must be between {minLength} and {maxLength}'}]
            }).render('#container4');
        </textarea>
    </div>

</div>


<!-- Example 5 -->
<div class='exampleDiv'>

    <p class="title">Required</p>

    <p>If the 'required' property is set, the 'validate' method will return false if the field is empty. In a form, the
        'validate' method will be called on each field and will return false if at least one field doesn't validate.</p>

    <div class='demoContainer' id='container5'></div>

    <div class='codeContainer'>
        <textarea name="code" class="js" cols="60" rows="1">
            //new YAHOO.inputEx.StringField({required: true, showMsg: true, parentEl: 'container5'});
            new Y.inputEx.StringField({validator:[{type:'meta',message:'This field is required'},{required: true}],
            showMsg: true}).render('#container5');
        </textarea>
    </div>

</div>


<!-- Example 6 -->
<div class='exampleDiv'>

    <p class="title">Regular Expression 1</p>

    <p>Here is an example on how to check the value with a regular expression. (It is better to use the IntegerField,
        but this is a simple example.)</p>

    <div class='demoContainer' id='container6'></div>

    <div class='codeContainer'>
        <textarea name="code" class="js" cols="60" rows="1">
            //new YAHOO.inputEx.StringField({label: 'Enter your age', regexp: /^[0-9]*$/, parentEl: 'container6'});
            new Y.inputEx.StringField({label: 'Enter your age', validator:[{regexp: /^[0-9]*$/, message:'invalid
            age'}]}).render('#container6');
        </textarea>
    </div>

</div>


<!-- Example 7 -->
<div class='exampleDiv'>

    <p class="title">Regular Expression 2</p>

    <p>The basic Field class can use regular expressions to validate the field content. Here is an example with this
        wonderful email regular expression (note that there is an Email Field class).</p>

    <div class='demoContainer' id='container7'></div>

    <div class='codeContainer'>
        <textarea name="code" class="js" cols="60" rows="1">
            //new YAHOO.inputEx.StringField({showMsg: true,regexp: inputEx.regexps.email, value: 'wrong@email',
            parentEl:
            //'container7'});
            new Y.inputEx.StringField({showMsg: true,validator:[{regexp: Y.inputEx.regexps.email, message:'invalid
            email'}], value: 'wrong@email'}).render('#container7');
        </textarea>
    </div>

</div>


<!-- Example 8 -->
<div class='exampleDiv'>

    <p class="title">Enabling/Disabling inputs</p>

    <p>You can call the methods 'disable' or 'enable' to set the state of the field.</p>

    <div class='demoContainer' id='container8'></div>

    <div class='codeContainer'>
        <textarea name="code" class="js" cols="60" rows="1">
            //var field = new YAHOO.inputEx.StringField({value: 'This field is disabled', parentEl: 'container8'});
            //field.disable();
            var field = new Y.inputEx.StringField({value: 'This field is disabled'});
            field.render('#container8');
            field.disable();
        </textarea>
    </div>

</div>


<!-- Example 9 -->
<div class='exampleDiv'>

    <p class="title">Updated event</p>

    <p>How to listen to the updated event :</p>

    <div class='demoContainer' id='container9'></div>

    <div class='codeContainer'>
        <textarea name="code" class="js" cols="60" rows="1">
            var el = Y.Node.get('#container9');
            var field = new Y.inputEx.StringField();
            field.render(el);
            var logDiv = Y.Node.create('
            <div>Log:<br/></div>
            ')
            el.appendChild(logDiv);
            field.on('field:change', function() {
            logDiv.set('innerHTML', logDiv.get('innerHTML') + 'Updated at ' + (new Date()) + ' with value: ' +
            arguments[1] + '<br/>')
            })
        </textarea>
    </div>

</div>


<!-- Example 10 -->
<div class='exampleDiv'>

    <p class="title">Type invitation</p>

    <p>Display a text when the field is empty.</p>

    <div class='demoContainer' id='container10'></div>

    <div class='codeContainer'>
        <textarea name="code" class="js" cols="60" rows="1">
            //new YAHOO.inputEx.StringField({parentEl: 'container10', typeInvite: 'lastname', description: 'Enter your
            //lastname'});
            new Y.inputEx.StringField({typeInvite: 'lastname', description: 'Enter your
            lastname'}).render('#container10');

        </textarea>
    </div>

</div>


<!-- Example 11 -->
<div class='exampleDiv'>

    <p class="title">Multiple options</p>

    <p>Check multiple options config : typeInvite, required, minLength &nbsp;--&nbsp; Test setValue and getValue
        methods</p>

    <div class='demoContainer' id='container11'></div>

    <div class='codeContainer'>
        <textarea name="code" class="js" cols="60" rows="1">
            var field1 = new Y.inputEx.StringField({typeInvite: 'lastname', description: 'Enter your lastname',
            validator:[{type:'meta', message:'required and min 10 characters'},{minLength:10}, {required:true}],
            showMsg:true});
            field1.render('#container11');

            var exampleDiv = Y.Node.get('#container11');

            var button1 = Y.Node.create('
            <button>setValue()</button>
            ');
            exampleDiv.appendChild(button1);
            button1.on('click', function() { field1.set("value", "I've been set by setValue"); })

            var button2 = Y.Node.create('
            <button>getValue()</button>
            ');
            exampleDiv.appendChild(button2);
            button2.on('click', function() { field1.set("value", "I've been set by getValue"); })
        </textarea>
    </div>

</div>


<!-- Example 12 -->
<div class='exampleDiv'>

    <p class="title">Focus the field</p>

    <p>Use the focus method</p>

    <div class='demoContainer' id='container12'></div>

    <div class='codeContainer'>
        <textarea name="code" class="js" cols="60" rows="1">
            var field12 = new Y.inputEx.StringField();
            field12.render('#container12');

            var exampleDiv = Y.Node.get('#container12');
            var button3 = Y.Node.create('
            <button>focus</button>
            ')
            exampleDiv.appendChild(button3);
            button3.on('click', function() { field12.focus(); })
        </textarea>
    </div>

</div>

<script>
    inputEx.YUI({base:'../lib/yui3/',inputExBase:'../'}).use('stringfield', function(Y) {
        //Y.on('event:ready', function() {
        // Example 1
        new Y.inputEx.StringField().render('#container1');

        // Example 2
        new Y.inputEx.StringField({value: 'inputEx rocks'}).render('#container2');

        // Example 3
        new Y.inputEx.StringField({size: 40, value: 'size is set to 40 (default is 20)'}).render('#container3');

        // Example 4
        new Y.inputEx.StringField({value: '0123456789', showMsg: true, validator:[{minLength: 3, maxLength: 10, message:'length must be between {minLength} and {maxLength}'}]
        }).render('#container4');

        // Example 5
        new Y.inputEx.StringField({validator:[{type:'meta',message:'This field is required'},{required: true}], showMsg: true}).render('#container5');

        // Example 6
        new Y.inputEx.StringField({label: 'Enter your age', validator:[{regexp: /^[0-9]*$/, message:'invalid age'}]}).render('#container6');

        // Example 7
        new Y.inputEx.StringField({showMsg: true,validator:[{regexp: Y.inputEx.regexps.email, message:'invalid email'}], value: 'wrong@email'}).render('#container7');

        // Example 8
        var field = new Y.inputEx.StringField({value: 'This field is disabled'});
        field.render('#container8');
        field.disable();

        // Example 9
        var el = Y.Node.get('#container9');
        var field = new Y.inputEx.StringField();
        field.render(el);
        var logDiv = Y.Node.create('<div>Log:<br/></div>')
        el.appendChild(logDiv);
        field.on('field:change', function() {
            logDiv.set('innerHTML', logDiv.get('innerHTML') + 'Updated at ' + (new Date()) + ' with value: ' + arguments[1] + '<br/>')
        })

        // Example 10
        new Y.inputEx.StringField({typeInvite: 'lastname', description: 'Enter your lastname'}).render('#container10');

        // Example 11
        var field1 = new Y.inputEx.StringField({typeInvite: 'lastname', description: 'Enter your lastname', validator:[{type:'meta', message:'required and min 10 characters'},{minLength:10}, {required:true}], showMsg:true});
        field1.render('#container11');

        var exampleDiv = Y.Node.get('#container11');

        var button1 = Y.Node.create('<button>setValue()</button>');
        exampleDiv.appendChild(button1);
        button1.on('click', function() { field1.set("value", "I've been set by setValue"); })

        var button2 = Y.Node.create('<button>getValue()</button>');
        exampleDiv.appendChild(button2);
        button2.on('click', function() { field1.set("value", "I've been set by getValue"); })

        // Example 12
        var field12 = new Y.inputEx.StringField();
        field12.render('#container12');

        var exampleDiv = Y.Node.get('#container12');
        var button3 = Y.Node.create('<button>focus</button>')
        exampleDiv.appendChild(button3);
        button3.on('click', function() { field12.focus(); })
        //});
    })

</script>

<script src="js/dpSyntaxHighlighter.js"></script>
<script language="javascript">
    dp.SyntaxHighlighter.HighlightAll('code');
</script>

</body>
</html>